<template>
	<cover-view :class="['car-box', !triangle && 'car-act']" :style="{'padding-top': topRPX}" @click="show = false" v-if="show">
		<cover-view class="content" @click.stop>
			<cover-view class="car-content">
				<cover-view class="car-tit car-view">
					<cover-view>序号</cover-view>
					<cover-view>图标</cover-view>
					<cover-view>说明</cover-view>
				</cover-view>
				<cover-view class="car-msg">
					<cover-view class="car-item car-view" v-for="(item, index) in iconLists" :key="item.stateIndex">
						<cover-view>{{index + 1}}</cover-view>
						<cover-view>
							<image :src="item.iconUrl" mode="aspectFit" class="item-icon"></image>
						</cover-view>
						<cover-view>{{item.name}}</cover-view>
					</cover-view>
				</cover-view>
			</cover-view>
			<cover-view class="triangle" v-if="triangle"></cover-view>
		</cover-view>
	</cover-view>
</template>

<script>
	import { mapState } from 'vuex';
	export default{
		props: {
			height: String,
			triangle: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				show: false,
				iconLists: []
			}
		},
		computed: {
			...mapState({
				carInfo: state => state.bike.carInfo
			}),
			topRPX() {
				return (parseInt(this.height) + uni.upx2px(124)) + 'px'
			}
		},
		methods: {
			async getData() {
				if(!this.carInfo.id) {
					uni.showToast({
						title: '请选择车辆',
						icon: 'none'
					})
				}else{
					// const ret = await this.$Http('get', {carId: this.carInfo.id}, '/gps-web/api/get_icon_desc.jsp');
					// this.iconLists = ret.list
					this.show = true
				}
			}
		}
	}
</script>

<style scoped>
	.car-box{
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 99;
		padding-right: 110rpx;
		display: flex;
		justify-content: flex-end;
	}
	.car-act{
		display: flex;
		justify-content: center;
		padding-right: 0;
	}
	.content{
		height: 640rpx;
		overflow-y: auto;
		color: #333333;
		font-size: 20rpx;
		display: flex;
		align-items: center;
	}
	.car-content{
		width: 430rpx;
		height: 620rpx;
		padding: 10rpx;
		background: #FFFFFF;
		box-shadow: 0px 3rpx 7rpx 0px #A09999;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
	}
	.car-view cover-view{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.car-tit{
		height: 48rpx;
		background: #F0F0F0;
		display: flex;
		align-items: center;
	}
	.car-view cover-view:nth-child(1),
	.car-view cover-view:nth-child(2){
		width: 86rpx;
	}
	.car-view cover-view:nth-child(3){
		flex: 1;
	}
	.car-item{
		height: 48rpx;
		display: flex;
		align-items: center;
	}
	.car-item:nth-child(even){
		background: #FAFAFA;
	}
	.item-icon{
		width: 32rpx;
		height: 32rpx;
	}
	.triangle{
		width: 0;
		height: 0;
		border-top: 20rpx solid transparent;
		border-left: 40rpx solid #fff;
		border-bottom: 20rpx solid transparent;
		position: relative;
		top: -116rpx;
	}
</style>
